<template>
	<view class="records-page">
		<view class="record-title">
			<text>视导内容</text>
		</view>
		<view>
			<u-collapse accordion>
				<u-collapse-item :title="item.name" v-for="item in schoolActives" :key="item.id">
					<u-tag slot="value" class="u-page__item__title__slot-title"
						:text="getFinishNum(item.children || []) +'/' + (item.children.length || 0)"
						borderColor="#F1F1F1" plain size="mini" type="warning"></u-tag>
					<view class="record-list" @click="viewContent(children.name,children.id,children.activityStatus)"
						v-for="children in item.children">
						<text class="u-collapse-content">{{children.name}}</text>
						<u-tag :text="children.activityStatus" :bgColor="children.activityStatusColor" shape="circle"
							borderColor="#F1F1F1" size="mini"></u-tag>
					</view>
				</u-collapse-item>
			</u-collapse>
		</view>
	</view>
</template>

<script>
	import {
		getSchoolActivityTarget
	} from '@/api/school/index.js'
	import {
		isRuntimeOnly
	} from "vue";
	export default {
		data() {
			return {
				schoolActives: [],
				activityStatus: "",
				activityStatusColor: "",
				children: [],
				activityId: ""
			}
		},
		computed: {
			schoolId() {
				return this.$store.state.user.schoolId
			},
		},
		methods: {
			getFinishNum(data) {
				let num = 0;
				data.forEach(item => {
					if (item.finishState === 1) {
						num++;
					}
				});
				return num;
			},
			viewContent(title, targetId, activityStatus) {
				this.$tab.navigateTo("/pages/school-index/school-self-check-content?title=" + title + "&activityId=" + this
					.activityId + "&targetId=" +
					targetId + "&activityStatus=" + activityStatus);
			},
			getTarget() {
				let schoolId = this.schoolId
				let activityId = this.activityId
				getSchoolActivityTarget(schoolId, activityId).then(res => {
					for (let i = 0; i < res.targets.length; i++) {
						if (res.targets[i].level == 1) {
							this.schoolActives.push(res.targets[i])
						}
					}
					for (let i = 0; i < this.schoolActives.length; i++) {
						let targets = res.targets
						for (let j = 0; j < targets.length; j++) {
							if (targets[j].level == 2 && targets[j].parentId == this.schoolActives[i].id) {
								let children = []
								children.push(targets[j])
								// 判断指标完成状态
								if (targets[j].finishState === 0) {
									targets[j].activityStatus = "未完成"
									targets[j].activityStatusColor = "#1DBB9C"

								} else {
									if ('improveState' in targets[j]) {
										if (targets[j].improveState === 0) {
											targets[j].activityStatus = "待审核"
											targets[j].activityStatusColor = "#F56C6C"
										} else if (targets[j].improveState === 1) {
											targets[j].activityStatus = "已通过"
											targets[j].activityStatusColor = "#409EFF"
										} else {
											targets[j].activityStatus = "未通过"
											targets[j].activityStatusColor = "#909399"
										}
									} else {
										targets[j].activityStatus = "已完成"
										targets[j].activityStatusColor = "#EF3030"
									}
								}

								if ('children' in this.schoolActives[i]) {
									this.schoolActives[i].children.push(children[0])
								} else {
									this.schoolActives[i].children = children
								}

							}
						}
					}

					console.log(this.schoolActives)
				})
			}
		},
		onLoad: function(option) {
			if (Object.keys(option).length > 0) {
				this.activityId = option.id
			}
			this.getTarget()
		}
	}
</script>

<style lang="scss" scoped>
	.records-page {
		width: 100vw;

		.record-title {
			text-align: center;
			height: 6vh;
			line-height: 6vh;
		}

		.record-list {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 5vh;
		}
	}
</style>